<template>
	<view style="display: flex;flex-wrap: wrap;flex-direction: row;align-items: center;">
		<block v-for="(item,index) in list" :key="index">
			<view class="relative" style="display: flex;flex-direction: column;margin: 10rpx;">
				<image :src="item.url" style="width: 144rpx; height: 144rpx;border-radius: 16rpx;" mode="aspectFill"
					@tap.stop="doPreviewImage(item.url, index)"></image>
				<view class="del center" :data-index="index" @click="deleteFn">
					<image src="/static/publish/del2.png" mode="widthFix" class="w-25 h-25"></image>
				</view>
				<view class="preview center">
					<image src="/static/search.png" mode="widthFix" class="w-25"></image>
				</view>
			</view>
		</block>
		<view v-if="maxCount > list.length" @click="uploadFn" class="center"
			style="background: #f8f8f8;width: 144rpx;height: 144rpx;border-radius: 16rpx;">
			<image src="/static/photo.png" mode="widthFix" class="w-50"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "imageUpload",
		props: {
			sourceType: {
				type: Array,
				default () {
					return ['album', 'camera'];
				}
			},
			// 最大上传数量
			maxCount: {
				type: [String, Number],
				default: 52
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				// 大小限制(byte)
				fileSize: 100 * 1024 * 1024,
			};
		},

		methods: {
			uploadFn() {
				var that = this
				let {
					sourceType,
					maxCount,
					list,
					fileSize
				} = that
				console.log(maxCount-this.list.length);
				uni.chooseImage({
					count: maxCount - this.list.length,
					sourceType: sourceType,
					success: function(res) {
						try {
							let pathArr = [];
							res.tempFiles.map(item => {
								console.log(item.size, '-------------', fileSize)
								if (item.size > fileSize) {
									throw "图片大小超出！"
								}
								list.push({
									url: item.path
								})
							})
							that.reUpload()
						} catch (err) {
							console.log(err)
							uni.showToast({
								title: '图片大小超过100M，请重新选择照片',
								icon: 'none'
							})
						}
					}
				})
			},
			// 返回数据更新数组
			reUpload() {
				this.$emit('change', this.list)
			},
			// 删除图片
			deleteFn(e) {
				let index = e.currentTarget.dataset.index
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: (res) => {
						if (res.confirm) {
							this.list.splice(index, 1);
							this.$emit('change', this.list);
							uni.showToast({
								title: '移除成功',
								icon: 'none'
							})
						}
					},
				})
			},
			// 预览图片
			doPreviewImage(url, index) {
				const images = this.list.map(item => item.url || item.path);
				uni.previewImage({
					urls: images,
					current: url,
					success: () => {
						// this.$emit('on-preview', url, this.lists, this.index);
					},
					fail: () => {
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.del {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		right: 0;
		top: 0;
		width: 45rpx;
		height: 45rpx;
		border-radius: 0 16rpx 0 16rpx;
	}

	.preview {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		right: 0;
		bottom: 0;
		width: 40rpx;
		height: 40rpx;
		border-radius: 16rpx 0 8rpx 0;
	}
</style>